<template>
  <HRContainer title="单位管理">
    <div>
      <!-- <div v-hasPermi="[1]">11111</div>
    <div @click="onClick">dffff</div> -->
      <HRUpload
        :uploadVisable="dialogVisible"
        @handleClose="handleClose"
        @handleConfirm="handleConfirm"
      ></HRUpload>
      <HRTable
        :tableData="tableData"
        :config="tableConfig"
        :loading="loading"
        @optionOclick="optionOclick"
        @sizeChange="sizeChange"
        @handleCurrentChange="handleCurrentChange"
        @linkOnClick="linkOnClick"
      >
        <template v-slot:buttonTool>
          <el-button type="primary" icon="Plus" plain @click="addTest"
            >新增</el-button
          >
          <el-button type="danger" icon="Delete" plain>删除</el-button>
          <el-button type="success" icon="Upload" plain @click="uploadAction"
            >上传</el-button
          >
        </template>
      </HRTable>
      <HRDialog
        :dialogVisable="testVisable"
        @handleClose="handleCloseTest"
        @handleConfirm="handleConfirmTest"
      >
        <div>哈哈哈</div>
      </HRDialog>
    </div>
  </HRContainer>
</template>

<script setup name="ClipboardIndex">
import { ref } from "vue";
import { useBtnPermiStore } from "@/store/buttonPermi";
import HRContainer from "@/components/HRContainer";
import HRTable from "@/components/HRTable";
import HRUpload from "@/components/HRUploadDialog";
import HRDialog from "@/components/HRDialog";
const btnPermiStore = useBtnPermiStore();
btnPermiStore.test();
console.log(btnPermiStore.btnPermis);

// const onClick = () => {
//   btnPermiStore.changeValue()
//   console.log(btnPermiStore.btnPermis)
// }
const loading = ref(false);
const tableConfig = {
  searchConfig: [
    {
      type: "input",
      label: "单位",
      prop: "dept",
    },
    {
      type: "select",
      label: "性别",
      prop: "sex",
      selectOptions: [
        {
          text: "男",
          value: 1,
        },
        {
          text: "女",
          value: 2,
        },
      ],
    },
    {
      type: "datePicker",
      label: "时间",
      prop: "date",
    },
  ],
  column: [
    {
      label: "名字",
      prop: "name",
      formatter: (row) => {
        console.log(row.name);
        return row.name + "2222";
      },
    },
    {
      label: "年龄",
      prop: "age",
    },
    {
      label: "性别",
      prop: "sex",
    },
    {
      label: "单位",
      prop: "company",
    },
    {
      type: "option",
      buttonConfig: [
        {
          id: "edit",
          icon: "Edit",
          label: "查看",
        },
        {
          id: "edit",
          icon: "Edit",
          label: "查看1",
        },
        {
          id: "delete",
          type: "danger",
          icon: "Delete",
          label: "删除",
        },
      ],
    },
  ],
};

const tableData = ref([
  { id: 1, name: "张三", age: 15, sex: "男", company: "华软科技" },
  { id: 2, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
  {
    id: 3,
    name: "张三1",
    age: 151,
    sex: "男1",
    company: "华软科技1",
    children: [
      { id: 4, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
      { id: 5, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
    ],
  },
]);

function optionOclick(btnID, data) {
  console.log(btnID, data);
}
function sizeChange(value) {
  tableData.value = [
    { id: 12, name: "李四", age: 34, sex: "女", company: "小点点都得" },
  ];
  console.log("sizeChange", value);
}
function handleCurrentChange(value) {
  console.log("handleCurrentChange", value);
  loading.value = false;
}
const linkOnClick = (data) => {
  console.log(data);
};

const dialogVisible = ref(false);

const uploadAction = () => {
  console.log("aaaa");
  dialogVisible.value = true;
};
const handleClose = () => {
  dialogVisible.value = false;
};

const handleConfirm = () => {
  dialogVisible.value = false;
};

const testVisable = ref(false);
const addTest = () => {
  testVisable.value = true;
};

const handleCloseTest = () => {
  testVisable.value = false;
};

const handleConfirmTest = () => {
  testVisable.value = false;
};
</script>

<style scoped lang="scss">
.clipboard-container {
  margin: 20px;
  padding: 20px;
  background-color: #fff;

  .copv-wrapper {
    padding-top: 20px;
  }
}
</style>
